<template>
  <div class="floor-wrapper">
    <div class="floor">
      <Parent v-if="parent.parent" :parent="parent.parent" @BtnReply="SendFollowId"></Parent>
      <div class="comment-item">
        <div class="cmt-info">
          <div class="userinfo">
            <img
              v-if="parent.defaultAvatar"
              :src="$axios.defaults.baseURL+parent.defaultAvatar"
              alt
            />
            <img v-else src="@/assets/test.jpg" alt />
            <span class="nickname">{{parent.account.nickname}}</span>
            <span class="time">{{$moment(parent.account.created_at).format("YYYY-MM-DD hh:mm")}}</span>
          </div>
          <div class="cmt-acount">{{parent.level}}</div>
        </div>
        <div class="cmt-msg">
          <div>
            <p class="msg">{{parent.content}}</p>
            <div class="cmt-img" v-for="(imgItem,index) in parent.pics" :key="index">
              <img v-if="imgItem.url" :src="$axios.defaults.baseURL+imgItem.url" alt />
            </div>
            <p class="reply">
              <a href="javascript:;" @click="btnReply(parent.id,parent.account.nickname)">回复</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Parent",
  props: ["parent"],
  methods: {
    btnReply(followid, nickname) {
      this.$emit("BtnReply", followid, nickname);
    },
    SendFollowId(followid, nickname) {
      this.$emit("BtnReply", followid, nickname);
    }
  }
};
</script>
<style lang="less" scoped>
.floor-wrapper {
  .floor {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 4px;
    height: fit-content;
    margin-bottom: 10px;
    .comment-item {
      padding: 5px 10px 0;
      .cmt-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #999;
        margin-bottom: 10px;
        .userinfo {
          img {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            vertical-align: top;
          }
          .nickname {
            color: #666;
            margin-left: 5px;
          }
        }
      }
      .cmt-msg {
        padding-left: 30px;
        .reply {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          text-align: right;
          color: #1e50a2;
          //   display: none;
          a {
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .cmt-img {
          width: 80px;
          height: 80px;
          border-radius: 6px;
          overflow: hidden;
          margin-right: 5px;
          margin-top: 10px;
          padding: 5px;
          border: 1px dashed #ddd;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}
</style>